<template>
  <div class="hello">
    <button class='but' v-for="item in listcomm" :key="item" @click="showname = item"
      :style="{ backgroundColor: showname == item ? 'yellow' : '' }">
      {{ '组件' + item }}
    </button>
    <component :is="showname" />
    <!-- <section style="width: 100%">
      <canvas id="canvas2" width="1500" height="800"></canvas>
    </section> -->
    <!-- <welcome/> -->
    <!-- <canv/> -->
    <!-- <G6Demo/> -->
    <!-- <DataConnection/> -->
    <!-- <xsixView /> -->
    <!-- <gojs /> -->
    <!-- <gojstwo /> -->
    <!-- <xslineView /> -->
    <!-- <antvx6 /> -->
    <!-- <onetest /> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      listcomm: [],
      showname: "G6",
      msg: '数据地图示例',
    }
  },
  created() {
    this.getcommlist()
  },
  mounted() {
    // this.drawCanvas1();
    // this.drawCanvas2()
    // this.drawCanvas3();
  },
  methods: {
    getcommlist() {
      let requiremoudle = require.context("@/comm", true, /\.vue/)
      let components = requiremoudle.keys().map(item => requiremoudle(item))
      components.forEach(item => {
        this.listcomm.push(item.default.name)
      });
    },
    drawCanvas2() {
      let canvas = document.querySelector('#canvas2'),
        ctx = canvas.getContext('2d'),
        flag = false

      // 扇形3
      ctx.beginPath()
      ctx.arc(310, 270, 680, [Math.PI / 180] * 8, [Math.PI / 180] * 349, true)
      ctx.lineTo(310, 270)
      ctx.fillStyle = '#fff'
      ctx.fill()
      ctx.closePath()
      ctx.beginPath()
      ctx.arc(310, 270, 500, [Math.PI / 180] * 8, [Math.PI / 180] * 349, true)
      ctx.lineTo(310, 270)
      ctx.fillStyle = '#e6eeee'
      ctx.fill()
      ctx.closePath()

      ctx.beginPath()
      ctx.arc(45, 250, 5, 0, Math.PI * 2, true)
      ctx.fillStyle = '#4444FF'
      ctx.font = 'bold 18px Arial'
      ctx.fillStyle = '#000'
      ctx.rotate((-8 * Math.PI) / 180)
      ctx.fillText('下游应用', 820, 315)
      ctx.closePath()
      ctx.beginPath()
      ctx.font = '16px Arial'
      ctx.rotate((3 * Math.PI) / 180)
      ctx.fillText('核算中心系统', 825, 305)
      ctx.closePath()
      ctx.beginPath()
      ctx.arc(815, 300, 5, 0, Math.PI * 2, true)
      ctx.fillStyle = 'orange'
      ctx.fill()
      ctx.closePath()

      // 扇形2
      ctx.beginPath()
      ctx.arc(-85, 270, 680, [Math.PI / 180] * 355, [Math.PI / 180] * 12, false)
      ctx.lineTo(-85, 270)
      ctx.fillStyle = '#fff'
      ctx.fill()
      ctx.closePath()
      ctx.beginPath()
      ctx.arc(-85, 270, 500, [Math.PI / 180] * 355, [Math.PI / 180] * 12, false)
      ctx.lineTo(-85, 270)
      ctx.fillStyle = '#e6eeee'
      ctx.fill()
      ctx.beginPath()
      ctx.arc(448, 279, 5, 0, Math.PI * 2, true)
      ctx.fillStyle = '#00CC00'
      ctx.fill()
      ctx.arc(447, 303, 5, 0, Math.PI * 2, true)
      ctx.fillStyle = '#00CC00'
      ctx.fill()
      ctx.closePath()
      ctx.beginPath()
      ctx.font = 'bold 18px Arial'
      ctx.fillStyle = '#000'
      ctx.rotate((-4 * Math.PI) / 180)
      ctx.fillText('数据中心-ods', 450, 285)
      ctx.closePath()
      ctx.font = '16px Arial'
      ctx.rotate((2 * Math.PI) / 180)
      ctx.fillText('ODS', 450, 299)
      ctx.closePath()
      ctx.rotate((2 * Math.PI) / 180)
      ctx.fillText('FDM', 460, 310)
      ctx.closePath()

      // 扇形1
      ctx.beginPath()
      ctx.arc(
        -510,
        220,
        680,
        [Math.PI / 180] * 357,
        [Math.PI / 180] * 14,
        false
      )
      ctx.lineTo(-510, 220)
      ctx.fillStyle = '#fff'
      ctx.fill()
      ctx.beginPath()
      ctx.arc(
        -510,
        220,
        500,
        [Math.PI / 180] * 357,
        [Math.PI / 180] * 14,
        false
      )
      ctx.lineTo(-510, 220)
      ctx.fillStyle = '#e6eeee'
      ctx.fill()
      ctx.closePath()

      ctx.beginPath()
      ctx.fillStyle = '#000'
      ctx.beginPath()
      ctx.font = 'bold 18px Arial'
      ctx.rotate((356 * Math.PI) / 180)
      ctx.fillText('', 30, 230)
      ctx.font = '16px Arial'
      ctx.rotate((4 * Math.PI) / 180)
      ctx.closePath()
      ctx.beginPath()
      ctx.fillText('', 22, 260)
      ctx.rotate((8 * Math.PI) / 180)
      ctx.closePath()
      ctx.beginPath()
      // ctx.arc(48, 250, 5, 0, Math.PI * 2, true)
      // ctx.fillStyle = '#4444FF'
      ctx.closePath()
      ctx.fill()
      ctx.closePath()

      // 连线
      // ctx.beginPath()
      // ctx.moveTo(150, 235)
      // ctx.quadraticCurveTo(280, 130, 482, 213)
      // ctx.stroke()

      ctx.beginPath()
      ctx.moveTo(482, 213)
      ctx.quadraticCurveTo(460, 225, 483, 238)
      ctx.stroke()

      ctx.beginPath()
      ctx.moveTo(530, 204)
      ctx.quadraticCurveTo(640, 120, 847, 182)
      ctx.stroke()
    },
    drawCanvas3() { },
  },
}
</script>

<style scoped>
#canvas1,
#canvas2 {
  background-color: #e6eeee;
}
</style>
